<template>
	<view class="content">
		<view class="header">
			<!-- 作者信息 -->
			<view class="user">
				<view class="userimg">
					<image :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="usermessage">
					<view class="username">{{userInfo.name}}</view>
					<view class="time">{{newData.day}}</view>
				</view>
			</view>
			<view class="imgmessage">
				<view class="goodnum">
					<text class="iconfont icon-dianzan1"></text>
					<text>{{newData.rank}}</text>
				</view>
				<view class="collect">
					<text class="iconfont icon-wodeshoucang"></text>
					<text>收藏</text>
				</view>
			</view>
			<!-- 图片大图 -->
			<view class="bigimg">
				<swiper-action @setDirection="getDirection">
					<image :src="newData.thumb" mode="aspectFill"></image>
				</swiper-action>
			</view>
		</view>
		<view class="saveimg">
			<view class="btn" @click="saveImg">下载图片</view>
		</view>
	</view>
</template>

<script>
	import moment from '@/utils/moment.js'
	import {imgdetail} from '@/api/album.js'
	import swiperAction from "@/components/swiperAction"
	moment.locale("zh-cn");    
	export default{
		components:{
			swiperAction
		},
		data(){
			return{
				// 传递过来的信息
				newData:{},
				// 用户信息
				userInfo:{},
				// 图片发布时间
				setTime:""
			}
		},
		onLoad(options) {
			var obj = decodeURIComponent(options.newData)
			var newData=JSON.parse(obj)
			this.newData=newData
			this.userInfo=newData.user
			this.setTime=newData.atime
			this.newData.day=moment(this.newData.atime).startOf('day').fromNow();  
			console.log(newData)
			this.loadData()
		},
		methods:{
			loadData(){
				imgdetail('image/v2/wallpaper/wallpaper/'+this.newData.id+'/comment').then(res=>{
					console.log("imgdetail",res)
				})
			},
			// 获取滑动方向
			getDirection(e){
				console.log(e)
			},
			// 下载图片
			async saveImg(){
				  const { $api: { Msg } } = this;
				uni.showLoading({
					title:"下载中"
				})
				// 1将远程图片下载到小程序内存
				const res1 = await uni.downloadFile({url:this.newData.img})
				const imgUrl=res1[1].tempFilePath
				// 2将小程序中的临时文件下载到本地
				const res2= await uni.saveImageToPhotosAlbum({filePath:imgUrl})
				console.log(res2)
				uni.showToast({
					icon:"success",
					title:"下载成功"
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.user{
		padding:55rpx 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.userimg{
			width: 85rpx;
			height: 85rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	.imgmessage{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		.goodnum{
			flex: 1;
			text-align: center;
			text{
				margin: 0 5rpx;
			}
		}
		.collect{
			flex: 1;
			text-align: center;
			text{
				margin: 0 5rpx;
			}
		}
	}
	.bigimg{
		padding: 30rpx 20rpx;
		image{
			width: 100%;
		}
	}
	.saveimg{
		position: absolute;
		bottom: 10rpx;
		padding: 0 20rpx;
		left: 0;
		width: 100%;
		.btn{
			background-color: #DD524D;
			text-align: center;
			padding: 15rpx;
			color: #fff;
			font-weight: 600;
		}
	}
</style>
